<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">归属公司：</span>
        <el-select
          v-model="formInfo.CompanyId"
          class="w164 mr14"
          :clearable="true"
          placeholder="请选择"
        >
          <el-option
            v-for="item in Companylist"
            :key="item.CompanyId"
            :label="item.FullName"
            :value="item.CompanyId"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">绑定基站：</span>
        <el-select
          v-model="formInfo.BSID"
          class="w164 mr14"
          :clearable="true"
          placeholder="请选择"
        >
          <el-option
            v-for="item in BaseStockData"
            :key="item.BSID"
            :label="'[' + item.BSID + ']' + item.BSName"
            :value="item.BSID"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">射频码(库存)：</span>
        <ElInput
          v-model="formInfo.ESLCode"
          class="w164 mr14"
          placeholder="请输入模板编码"
        />
        <span class="color_494949 ft12 pr5">出库状态：</span>
        <el-select
          v-model="formInfo.StockStatus"
          class="w164 mr14"
          placeholder="请选择"
        >
          <el-option
            v-for="item in StockData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">标签类别：</span>
        <el-select
          v-model="formInfo.VerNo"
          class="w164 mr14"
          :clearable="true"
          placeholder="请选择"
        >
          <el-option
            v-for="item in VerNoData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">屏幕类型：</span>
        <el-select
          v-model="formInfo.LCDType"
          class="w164 mr14"
          :clearable="true"
          placeholder="请选择"
        >
          <el-option
            v-for="item in LCDData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span class="color_494949 ft12 pr5">条形码(库存)：</span>
        <ElInput
          v-model="formInfo.UUID"
          class="w164 mr14"
          placeholder="请输入模板编码"
        />
        <span class="color_494949 ft12 pr5">二代条形码：</span>
        <ElInput
          v-model="formInfo.ESLCode2"
          class="w164 mr14"
          placeholder="请输入模板编码"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          查询
        </el-button>
      </div>
      <div class="pdb10">
        <div class="add-box mr14" @click="addESLcode('1')">
          <vab-icon icon="add-box-line" />
          <span>生成射频码</span>
        </div>
        <div class="add-box mr14" @click="addESLcode('2')">
          <vab-icon icon="edit-box-line" />
          <span>设置条形码</span>
        </div>
        <div class="add-box add-box3" @click="addESLcode('3')">
          <vab-icon icon="logout-box-r-line" />
          <span>出库</span>
        </div>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column prop="value" type="selection" width="55" />
        <!-- <el-table-column label="序号" type="index" width="80" /> -->
        <!-- <el-table-column label="编号" prop="ID" show-overflow-tooltip /> -->
        <el-table-column label="绑定基站" prop="BSName" show-overflow-tooltip />
        <el-table-column label="条形码" prop="UUID" show-overflow-tooltip />
        <el-table-column
          label="二代条形码"
          prop="ESLCode2"
          show-overflow-tooltip
        />
        <el-table-column label="射频码" prop="ESLCode" show-overflow-tooltip />
        <el-table-column
          label="射频码(旧)"
          prop="ESLCodeOld"
          show-overflow-tooltip
        />
        <el-table-column label="ESL名称" prop="ESLName" show-overflow-tooltip />
        <el-table-column label="屏幕类型" show-overflow-tooltip>
          <template #default="{ row }">
            <div>
              {{ lcdtypes(row.LCDType) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="InitCodeStatus"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>{{ row.InitCodeStatus === '2' ? '正常' : '其它' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="归属公司ID"
          prop="CompanyId"
          show-overflow-tooltip
        />
        <el-table-column
          label="归属公司"
          prop="CompanyName"
          show-overflow-tooltip
        />
        <el-table-column label="类别" prop="VerNo" show-overflow-tooltip>
          <template #default="{ row }">
            <div>{{ row.VerNo === 1 ? '二代' : '一代' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          prop="CreateDate"
          show-overflow-tooltip
        />
        <el-table-column
          label="库存状态"
          prop="StockStatus"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>
              {{
                row.StockStatus === 1
                  ? '已出库'
                  : row.StockStatus === 0
                  ? '未出库'
                  : '待定'
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('edit')"
              link
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              修改
            </el-button>
            <el-button link size="small" type="danger" @click="unbingbsFn(row)">
              退库
            </el-button>
            <!-- <el-button
              v-if="MenuAuths('delete')"
              link
              size="small"
              type="danger"
              @click="deletedFn(row)"
            >
              写射频码
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div v-if="total > 0" class="pagination">
        <ElPagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="widthdialog"
      @close="closeFn"
    >
      <detail v-if="detailType === 1" :form="form" />
      <setEslCode
        v-if="detailType === 2"
        :basestockdata="BaseStockData"
        :form="setform"
      />
      <exportdetail v-if="detailType === 3" :form="exportform" />
      <editdetail
        v-if="detailType === 4"
        :basestockdata="BaseStockData"
        :form="editform"
      />
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Wms_ESLStockData,
    addbatcheslcode,
    editbatchuuid,
    outESLStock,
    BaseStationData,
    CompanyData,
    unbingbs,
    eslstockedit,
  } from '@/api/eslstock'
  import detail from './components/detail'
  import setEslCode from './components/setEslCode'
  import exportdetail from './components/exportdetail'
  import editdetail from './components/editdetail'
  import { MenuAuth } from '~/src/utils/permission'
  export default defineComponent({
    name: 'Arrival',
    components: { detail, setEslCode, exportdetail, editdetail },
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        detailType: 1, // 1是生成射频码弹框 2是设置条形码弹框
        widthdialog: '600px',
        title: 'ESL库存',
        Companylist: [],
        BaseStockData: [],
        editform: {},
        ItemList: [],
        exportform: {
          comid: '',
          deptid: '',
          chiledData: [
            {
              ESLCode: '',
            },
          ],
        },
        form: {
          eslCodeNum: '',
          eslCodeOld: '',
          memo: '',
          version: '',
        },
        setform: {
          bsid: '',
          lcdtype: '00',
          isESLCode2: 1,
          editbatchuuid: '',
          chiledData: [
            {
              UUID: '',
              ESLCode: '',
              ESLCode2: '',
              eslCodeOld: '',
            },
          ],
        },
        formInfo: {
          CompanyId: '',
          BSID: '',
          StockStatus: -1,
          ESLCode: '',
          UUID: '',
          LCDType: '-1',
          ESLCode2: '',
          VerNo: '',
        },
        StockData: [
          {
            label: '全部',
            value: -1,
          },
          {
            label: '未出库',
            value: 0,
          },
          {
            label: '已出库',
            value: 1,
          },
        ],
        LCDData: [
          {
            label: '全部',
            value: '-1',
          },
          {
            label: '212*104',
            value: '00',
          },
          {
            label: '200*200',
            value: '01',
          },
          {
            label: '296*152',
            value: '02',
          },
          {
            label: '250*122',
            value: '03',
          },
          {
            label: '880*528',
            value: '04',
          },
          {
            label: '300*400',
            value: '05',
          },
          {
            label: '296*128',
            value: '06',
          },
        ],
        VerNoData: [
          {
            label: '全部',
            value: -1,
          },
          {
            label: '一代',
            value: 0,
          },
          {
            label: '二代',
            value: 1,
          },
        ],
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
      this.CompanyData()
      this.BaseStationData()
    },
    methods: {
      lcdtypes(id) {
        switch (id) {
          case '01':
            return '200*200'
          case '00':
            return '212*104'
          case '02':
            return '296*152'
          case '03':
            return '250*122'
          case '04':
            return '800*528'
          case '05':
            return '300*400'
          case '06':
            return '296*128'
        }
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      handleSelectionChange(e) {
        this.ItemList = e
      },
      async addESLcode(val) {
        if (val === '1') {
          this.widthdialog = '600px'
          this.title = 'ESL库存'
          this.detailType = 1
          this.form = {
            eslCodeNum: '',
            eslCodeOld: '',
            memo: '',
            version: '',
          }
        } else if (val === '2') {
          this.widthdialog = '850px'
          this.title = '批量设置条形码'
          this.detailType = 2
          this.setform = {
            bsid: '',
            lcdtype: '00',
            isESLCode2: 1,
            editbatchuuid: '',
            chiledData:
              this.ItemList.length > 0
                ? this.ItemList
                : [
                    {
                      UUID: '',
                      ESLCode: '',
                      ESLCode2: '',
                      eslCodeOld: '',
                    },
                  ],
          }
        } else if (val === '3') {
          this.widthdialog = '600px'
          this.title = 'ESL库存分配给商户'
          this.detailType = 3
          this.exportform = {
            comid: '',
            deptid: '',
            chiledData: [
              {
                ESLCode: '',
              },
            ],
          }
        }
        this.dialogVisible = true
      },
      detailFn(row) {
        console.log(row)
        this.detailType = 4
        this.editform = row
        this.dialogVisible = true
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            {
              name: 'CompanyId',
              value: this.formInfo.CompanyId,
              displayType: 'like',
            },
            {
              name: 'StockStatus',
              value:
                this.formInfo.StockStatus === -1
                  ? ''
                  : this.formInfo.StockStatus,
              displayType: 'like',
            },
            {
              name: 'BSID',
              value: this.formInfo.BSID,
              displayType: 'like',
            },
            {
              name: 'ESLCode',
              value: this.formInfo.ESLCode,
              displayType: 'like',
            },
            {
              name: 'VerNo',
              value: this.formInfo.VerNo,
              displayType: 'like',
            },
            {
              name: 'LCDType',
              value:
                this.formInfo.LCDType === '-1' ? '' : this.formInfo.LCDType,
              displayType: 'like',
            },
            {
              name: 'UUID',
              value: this.formInfo.UUID,
              displayType: 'like',
            },
            {
              name: 'ESLCode2',
              value: this.formInfo.ESLCode2,
              displayType: 'like',
            },
          ]),
          export: false,
          value: '',
        }
        const data = await Wms_ESLStockData(params)
        this.tableData = data.data.rows
        this.total = data.data.total
        console.log(this.tableData)
      },
      async BaseStationData() {
        const params = {
          pageNo: 1,
          pageSize: 20,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await BaseStationData(params)
        if (data.code === '200') {
          this.BaseStockData = data.data.rows
        }
      },
      async CompanyData() {
        const params = {
          pageNo: 0,
          pageSize: 0,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await CompanyData(params)
        if (data.code === '200') {
          console.log(data)
          this.Companylist = data.data.rows
        }
      },
      async submit() {
        if (this.detailType === 1) {
          await this.addbatcheslcode()
          this.dialogVisible = false
        } else if (this.detailType === 2) {
          await this.editbatchuuid()
          this.dialogVisible = false
        } else if (this.detailType === 3) {
          if (this.exportform.chiledData) {
            let flag = true
            this.exportform.chiledData.map((item) => {
              if (!item.ESLCode) {
                flag = false
                this.$message({
                  type: 'error',
                  message: '请填写射频码！',
                })
                return
              }
            })
            if (flag) {
              await this.outESLStock()
            }
          }
        } else if (this.detailType === 4) {
          await this.eslstockedit()
          this.dialogVisible = false
        }
      },
      async eslstockedit() {
        const params = this.editform
        const data = await eslstockedit(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '保存成功',
          })
        }
      },
      async outESLStock() {
        const ESLarr = []
        if (
          this.exportform.chiledData &&
          this.exportform.chiledData.length > 0
        ) {
          this.exportform.chiledData.map((item) => {
            ESLarr.push(item.ESLCode)
          })
        }
        if (!this.exportform.comid) {
          this.$message({
            type: 'error',
            message: '请选择商户！',
          })
          return
        }
        const params = {
          liststr: ESLarr.join(','),
          comid: this.exportform.comid,
          deptid: this.exportform.deptid,
        }
        const data = await outESLStock(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '保存成功',
          })
        }
        this.dialogVisible = false
      },
      async editbatchuuid() {
        const params = {
          list: this.setform.chiledData,
          bsid: this.setform.bsid,
          bsname: this.setform.bsname,
          lcdtypeid: this.setform.lcdtype,
          verno: this.setform.isESLCode2,
        }
        const data = await editbatchuuid(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '保存成功',
          })
        }
      },
      async addbatcheslcode() {
        const params = {
          comID: '',
          eslCodeNum: this.form.eslCodeNum,
          eslCodeOld: this.form.eslCodeOld,
          memo: this.form.memo,
          version: this.form.version,
        }
        const data = await addbatcheslcode(params)
        if (data.code === '200') {
          this.$message({
            type: 'success',
            message: '保存成功',
          })
        }
      },
      // 退库
      async unbingbsFn(row) {
        const params = {
          id: row.ID,
          bsid: row.BSID,
        }
        const data = await unbingbs(params)
        if (data.code === '200') {
          this.getList()
          this.$message({
            type: 'success',
            message: data.message,
          })
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }

    .w164 {
      width: 164px;
    }

    .mb20 {
      margin-bottom: 20px;
    }

    .mr14 {
      margin-right: 14px;
    }
    .add-box {
      display: inline-block;
      width: 100px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #999;
      border-radius: 3px;
      cursor: pointer;
    }
    .add-box3 {
      width: 60px;
    }
    .pdb10 {
      padding-bottom: 10px;
    }
  }
</style>
